<!-- 找资源 -->
<template>
  <div class="fullW">
    <breadcrumb />
    <div class="queryData brw">
      <el-input
        v-model="searchData.companyName"
        placeholder="找资源，可输入关键词搜索"
        size="large"
        class="search"
      >
        <template #prepend>
          <el-select
            v-model="searchData.categoryCode"
            placeholder="Select"
            style="width: 135px"
            @change="categoryChange"
          >
            <el-option
              v-for="(item, index) in categoryList"
              :key="index"
              :label="item.categoryName"
              :value="item.categoryCode"
            />
          </el-select>
        </template>
        <template #append>
          <el-button class="btn" type="primary" @click="getList"
            >搜索</el-button
          >
        </template>
      </el-input>
      <div class="list" v-if="queryOption.length>0">
        <ul>
          <li v-for="(item, index) in queryOption" :key="index">
            <div class="title">{{ item.title }}</div>
            <div class="items">
              <el-checkbox-group
                v-if="item.multiple"
                @change="(e) => checkboxChange(e, item,index)"
                v-model="queryFrom[index].itemCodes"
                size="default"
                class="group"
              >
                <el-checkbox-button
                  v-for="(cell, i) in item.items"
                  :key="i"
                  :value="cell.value"
                >
                  {{ cell.name }}
                </el-checkbox-button>
              </el-checkbox-group>
              <el-radio-group
                v-else
                v-model="queryFrom[index].itemCodes"
                size="default"
                class="group"
              >
                <el-radio-button
                  v-for="(cell, i) in item.items"
                  :key="i"
                  :value="cell.value"
                  >{{ cell.name }}</el-radio-button
                >
              </el-radio-group>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="brw mt-16px pt-24px">
      <div class="w-list">
        <ul>
          <li
            v-for="(item, index) in dataList"
            :index="index"
            @click="linkTo(item)"
          >
            <div class="photo">
              <useImage class="img" :src="item.companyImg"/>
            </div>
            <div class="info">
              <div class="title">{{ item.companyName }}</div>
              <div class="tags">
                <div v-for="(li, ind) in item.companyServiceList">
                  {{ li.categoryName }}：<span v-for="(serviceItem,s) in li.serviceItemTypeVO" :key="s">{{ serviceItem.name }}<span v-if="s<li.serviceItemTypeVO.length-1">，</span></span>
                </div>
              </div>
              <div class="contact">
                <div>
                  <i class="iconfont icon-phone"></i>电话：{{
                    item.cantactPhone
                  }}
                </div>
                <!-- <div>
                  <i class="iconfont icon-mailbox"></i
                  >邮箱：22211223232@ggjs.com
                </div> -->
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="pb-24px flex-center">
        <el-pagination
          :background="true"
          :current-page="initParam.pageNum"
          :page-size="initParam.pageSize"
          :page-sizes="[10, 25, 50, 100]"
          :total="initParam.total"
          :layout="'total, sizes, prev, pager, next'"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { companyServiceListSet } from "@/utils";
useHead({
  title: `找资源-${appTitle}`,
});

definePageMeta({ title: "找资源" });
// 获取用户信息
import { storeToRefs } from "pinia";
const global = useStore.global();
const { categoryList } = storeToRefs(global);

const route = useRoute();

const searchData = reactive({
  categoryCode: route.query.type || "OVERSEAS_WAREHOUSE",
  companyName: route.query.title,
});

// [
//   {
//     title: "货物类型（多选）",
//     key: "type",
//     multiple: true,
//     items: [
//       {
//         name: "全部",
//         value: "all",
//       },
//     ],
//   },
// ]
const queryOption = ref([]);
const queryFrom = ref([]);

const getServiceData = async (params) => {
  queryOption.value=[]
  const data = await getServiceDataApi(params);
  for (let index = 0; index < data.length; index++) {
    const item = data[index];
    for (let j = 0; j < data.length; j++) {
      const childData = await getServiceDataApi({ categoryId: item.categoryId, parentId: item.id })
      data[index].items = childData.map(it=>{
        return {
          name:it.name,
          value:it.code
        }
      })

    }

    queryFrom.value.push({
      itemTypeCode:item.code,
      itemCodes:['all']
    })
    queryOption.value.push({
      multiple:true,
      title:item.name,
      itemTypeCode:item.code,
      items:[
      {
        name: "全部",
        value: "all",
      },
        ...item.items
      ]
    })
  }
  console.log(queryOption.value)
};
const getServiceDataApi = (params) => {
  return new Promise((resolve, reject) => {
    api.post(`/serviceItem/queryList`, params).then((res) => {
      resolve(res);
    });
  });
};

const checkboxChange = (e, data,index) => {
  console.log(data.itemTypeCode,queryFrom.value[index])
  const values = data.items.map((it) => it.value);
  if (e[e.length - 1] === "all") {
    queryFrom.value[index].itemCodes = values;
    return;
  }
  if (e.length !== values.length && e.includes("all")) {
    queryFrom.value[index].itemCodes = e.filter((it) => it !== "all");
  }

  if (e.length === values.length - 1 && !e.includes("all")) {
    queryFrom.value[index].itemCodes.unshift("all");
  }

  if(e.length===0){
    queryFrom.value[index].itemCodes=['all']
  }

};

const linkTo = (data) => {
  navigateTo({ path: `/resource/detail`, query: { id: data.id } });
};

// 表格初始参数
const initParam = reactive({
  pageNum: 1,
  pageSize: 10,
});
const dataList = ref();
const getList = () => {
  let setQueryFrom = [];
  queryFrom.value.forEach(item=>{
    setQueryFrom.push({
      itemTypeCode:item.itemTypeCode,
      itemCodes:item.itemCodes.filter((it) => it !== "all")
    })
  })
  api
    .post("/userCompany/queryPage", {
      ...searchData,
      ...initParam,
      itemQueryParams:setQueryFrom
    })
    .then((res) => {
      dataList.value = res.list.map(item=>{
        if(item.companyServiceList){
          item.companyServiceList = companyServiceListSet(item.companyServiceList)
        }
        return item
      });
      initParam.total = res.total;
    });
};

const handleSizeChange = (val) => {
  initParam.pageNum = 1;
  initParam.pageSize = val;
  getList();
};
const handleCurrentChange = (val) => {
  initParam.pageNum = val;
  getList();
};

const categoryChange = ()=>{
  let categoryObj = categoryList.value.find(
    (item) => item.categoryCode === searchData.categoryCode
  );
  if (categoryObj) {
    getServiceData({ categoryId: categoryObj.id, parentId: 0 });
  }
}

watch(
  () => queryFrom.value,
  (newQuery, oldQuery) => {
    getList();
  },
  {
    deep: true,
  }
);
watch(
  () => route.query,
  (newQuery, oldQuery) => {
    searchData.categoryCode = newQuery.type;
    getList();
  },
  {
    immediate: true,
  }
);

onMounted(() => {
  categoryChange()
});
</script>
<style scoped lang="scss">
.queryData {
  padding: 24px;

  .list {
    margin-top: 16px;
    li {
      border-bottom: 1px solid var(--use-color-line);
      padding: 15px 0;
      display: flex;
      .title {
        line-height: 26px;
        width: 128px;
      }
      .items {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        ::v-deep(.group) {
          display: flex;
          gap: 40px;

          .el-radio-button__original-radio:checked + .el-radio-button__inner {
            color: var(--use-color-info);
            border-radius: 4px;
          }
          .el-radio-button .el-radio-button__inner,
          .el-checkbox-button__inner {
            border: none;
          }
          .el-checkbox-button:last-child .el-checkbox-button__inner,
          .el-checkbox-button.is-checked .el-checkbox-button__inner {
            border-radius: 4px;
            box-shadow: none;
            color: var(--use-color-info);
          }
        }
      }
    }
  }
}

.w-list {
  padding-bottom: 24px;
  li + li {
    margin-top: 16px;
  }
  li {
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid var(--use-color-line);
    cursor: pointer;
    display: flex;

    &:hover {
      border-color: var(--use-color-info);
    }

    .photo {
      width: 236px;
      height: 160px;
      border-radius: 4px;
      overflow: hidden;
      margin-right: 24px;
      .img {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      .title {
        line-height: 26px;
        font-size: 18px;
        font-weight: bold;
      }
      .tags {
        padding-top: 4px;
        color: var(--use-color-info-light-2);
        line-height: 22px;
        > div {
          margin-top: 8px;
        }
      }

      .contact {
        padding-top: 20px;
        display: flex;
        color: var(--use-color-info-light-3);
        gap: 0 32px;
        .iconfont {
          margin-right: 8px;
        }
      }
    }
  }
}

::v-deep(.search) {
  width: 800px;
  height: 44px;
  line-height: 44px;
  border: 2px solid var(--use-color-primary);
  overflow: hidden;
  border-radius: 8px;

  .el-input__inner {
    font-size: 16px;
  }

  .el-input-group__prepend {
    background-color: #fff;
    box-shadow: none;
    border-right: 2px solid #f0f2f9;

    .el-select__wrapper {
      height: 44px;
      line-height: 44px;
      font-size: 16px;
    }
  }

  .el-input__wrapper {
    box-shadow: none;
  }

  .btn {
    font-size: 16px;
    width: 96px;
    background-color: var(--use-color-primary) !important;
    color: var(--use-color-info) !important;
    font-weight: 500;
    border-radius: 8px !important;
    height: 44px !important;
    padding: 0 24px !important;
  }
}
</style>
